<template>
  <mt-tabbar v-model="selected" :fixed="true">
    <mt-tab-item id="page" @click.native="clickTab('page', $event)">
      <img slot="icon" :src="tabbar.page.flag? tabbar.page.src1 : tabbar.page.src2">
      首页
    </mt-tab-item>
    <mt-tab-item id="find" @click.native="clickTab('find', $event)">
      <img slot="icon" :src="tabbar.find.flag? tabbar.find.src1 : tabbar.find.src2">
      发现
    </mt-tab-item>
    <mt-tab-item id="order" @click.native="clickTab('order', $event)">
      <img slot="icon" :src="tabbar.order.flag? tabbar.order.src1 : tabbar.order.src2">
      订单
    </mt-tab-item>
    <mt-tab-item id="mine" @click.native="clickTab('mine', $event)">
      <img slot="icon" v-if="tabbar.mine.flag" src="../../../assets/images/elm2.png">
      <img slot="icon" v-else :src="tabbar.mine.src1">
      我的
    </mt-tab-item>
  </mt-tabbar>
</template>

<script>
import { e1, e2, l1, l2, m1, m2, elm2 } from '_c/home/footerbar/home-footer-data'
export default {
  name: 'footer-bar',
  data() {
    return {
      initValue: 'page',
      selected: '',
      tabbar: {
        page: {
          flag: true,
          src1: e1,
          src2: e2
        },
        find: {
          flag: true,
          src1: l1,
          src2: l2
        },
        order: {
          flag: true,
          src1: m1,
          src2: m2
        },
        mine: {
          flag: true,
          src1: elm2
        }
      }
    }
  },
  created() {
    const initValue = window.sessionStorage.getItem('initValue') || this.initValue
    for(let key in this.tabbar) {
      if(key === initValue) {
        this.tabbar[key].flag = true
      }else {
        this.tabbar[key].flag = false
      }
    }
  },
  methods: {
    clickTab(type, e) {
      if(e.target.nodeName === 'A') {
        e.target.classList.remove('is-selected')
      }else if(e.target.nodeName === 'DIV'){
        e.target.parentNode.classList.remove('is-selected')
      }else {
        e.target.parentNode.parentNode.classList.remove('is-selected')
      }
      for(let key in this.tabbar) {
        this.tabbar[key].flag = false
      }
      this.tabbar[type].flag = true
      if(type === 'mine') {
        this.$router.push('/mine')
      }else if(type === 'order') {
        this.$router.push('/order')
      }else if(type === 'find') {
        this.$router.push('/find')
      }else if(type === 'page') {
        this.$router.push('/index')
      }
      window.sessionStorage.setItem('initValue', type)
    }
  }
}
</script>

<style scoped>
  /deep/.mint-tab-item-label {
    font-size: 30px;
  }
  /deep/.mint-tab-item-icon {
    height: 36px;
    width: 36px;
  }
</style>
